<template>
	<w-container :loading="loading">
		<w-navbar left-icon="arrow-left" bgColor="#1B52F5">
			<template #center>
				<w-tabs lineBg="#fff" line-width="20" line-height="3" :tabList="tabs" :current="current" @change="changCurrent" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"></w-tabs>
			</template>
			<template #right>
				<view @click="taLastData" class="font-color-white font-size-14">往期数据</view>
			</template>
		</w-navbar>
		<u-gap height="10"></u-gap>
		<w-image v-if="info" :src="info.fm_image" mode="widthFix" width="100%"></w-image>
		<w-image v-else src="/static/bg/daowang-gg.png" mode="widthFix" width="100%"></w-image>
		<view v-if="info" class="plr-16">
			<view class="bg-color-white item-box">
				<view class="flex flex-ai-center flex-js-sb">
					<w-image src="/static/bg/benqijiangci-text.png" width="110.75" mode="widthFix"></w-image>
					<view class="end-cown-time flex flex-ai-center">
						<block v-if="currentStatus.cownDownTime">
							<u-count-down @finish="dowmTimeEnd" :time="currentStatus.cownDownTime" :format="`DD天HH时mm分ss秒 ${currentStatus.textName}`"></u-count-down>
						</block>
						<block v-else>
							<view class="font-size-14 font-color-white">{{ currentStatus.textName }}</view>
						</block>
					</view>
				</view>
				<view class="flex flex-ai-center flex-js-sb flex-w">
					<view v-for="(item,index) in vote_reward" :key="index" class="goods-item-box flex flex-dir-col flex-ai-center">
						<w-image :src="item.fm_image" width="150" height="150" radius="12"></w-image>
						<view class="font-w-500 font-size-14 font-color-222 mt-10 text-overflow">{{ item.reward_title }}</view>
					</view>
				</view>
			</view>
			<view class="bg-color-white item-box mt-16">
				<view class="flex flex-ai-center flex-js-sb">
					<w-image src="/static/bg/toupiaoqu-text.png" width="90.45" mode="widthFix"></w-image>
					<view class="flex flex-ai-center">
						<view class="flex flex-ai-center">
							<w-image src="/static/bg/dao-bg.png" width="16" height="35" mode="aspectFit"></w-image>
							<view class="font-w-500 font-color-222 font-size-14 ml-6">{{ userInfo.knife_vote || 0 }}</view>
						</view>
						<view class="flex flex-ai-center ml-24">
							<w-image src="/static/bg/hua-bg.png" width="16" height="35" mode="aspectFit"></w-image>
							<view class="font-w-500 font-color-222 font-size-14 ml-6">{{ userInfo.flower_vote || 0 }}</view>
						</view>
					</view>
				</view>
				<view class="flex flex-ai-center flex-js-sb flex-w">
					<view v-for="(item,index) in vote_area" :key="item.id" class="goods-item-box flex flex-dir-col flex-ai-center">
						<view class="image-box">
							<w-image :src="item.image" width="150" height="150" radius="12"></w-image>
							<view class="number-data-box flex flex-js-center font-w-bold font-size-10">
								<view class="number-box flex flex-ai-center">
									<view class="font-color-white"><text style="color: #00FFA9;">{{ item.knife_count }}</text>刀</view>
									<view class="font-color-white ml-10"><text style="color: #00FFA9;">{{ item.flower_count }}</text>花</view>
								</view>
							</view>
						</view>
						<view class="font-w-500 font-size-12 mt-12 flex flex-ai-center">
							<view @click="handle_vote_change(item.id,item.vote_id,1)" class="kanyidao-btn">砍一刀</view>
							<view @click="handle_vote_change(item.id,item.vote_id,2)" class="songhua-btn">送朵花</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-color-white item-box mt-16">			
				<w-image src="/static/bg/get-more-time-bg.png" width="219.11" mode="widthFix"></w-image>
				<view @click="create_vote_password_change" class="mt-20 flex flex-ai-center flex-js-sb">
					<view class="flex flex-ai-center">
						<w-icon name="icon-getshareday" size="50"></w-icon>
						<view class="flex flex-dir-col ml-12">
							<view class="font-color-222 font-size-14 font-w-500">每日分享活动</view>
							<view class="font-w-600 font-size-16 gradient-text" >+1</view>
						</view>
					</view>
					<w-button class="more-btn">复制链接</w-button>
				</view>
				<view @click="toPage('/pages/market/market')" class="mt-20 flex flex-ai-center flex-js-sb">
					<view class="flex flex-ai-center">
						<w-icon name="icon-day-buy" size="50"></w-icon>
						<view class="flex flex-dir-col ml-12">
							<view class="font-color-222 font-size-14 font-w-500">每日购买满1笔</view>
							<view class="font-w-600 font-size-16 gradient-text" >+1</view>
						</view>
					</view>
					<w-button class="more-btn">去购买</w-button>
				</view>
				<view @click="toPage('/pages/invitation/invitation')" class="mt-20 flex flex-ai-center flex-js-sb">
					<view class="flex flex-ai-center">
						<w-icon name="icon-successinvite" size="50"></w-icon>
						<view class="flex flex-dir-col ml-12">
							<view class="font-color-222 font-size-14 font-w-500">成功邀请1位好友</view>
							<view class="font-w-600 font-size-16 gradient-text" >+1</view>
						</view>
					</view>
					<w-button class="more-btn">去邀请</w-button>
				</view>
				<u-gap height="15"></u-gap>
			</view>	
		</view>
		<view v-else class="plr-16">
			<view class="nodata-box flex flex-dir-col flex-ai-center flex-js-center">
				<w-image src="/static/bg/dao-empty.png" mode="widthFix" width="64.53" height="57"></w-image>
				<view class="font-color-222 font-size-14 mt-17">打榜选手正在热身，精彩活动即将开启</view>
			</view>
		</view>
		<u-gap height="50"></u-gap>
	</w-container>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import { voteIndex,handle_vote,create_vote_password } from "@/api/bladeMonarch/index.js"
	export default {
		data() {
			return {
				tabs:[
					{
						name:'进行中'
					},
					// {
					// 	name:'下一期'
					// }
				],
				current:0,
				inactiveStyle:{
					color:'#fff',
					fontSize:'32rpx',
					fontweight:'bold'
				},
				activeStyle:{
					color:'#fff',
					fontSize:'32rpx',
					fontweight:'bold'
				},
				info:null,
				loading:true,
				vote_area:[],
				vote_reward:[],
				timer:null,
				currentId:''
			}
		},
		onShow() {
			this.getVoteIndex()
			this.getUserInfo()
		},
		onLoad({id = ''}){
			this.currentId = id		
		},
		computed: {
			currentStatus(){
				let statusObj = {
					cownDownTime:'',
					textName:'',
					status:0  //1未开始 2进行中 3已结束
				}
				let currentTime = new Date().getTime()
				let info = this.info
				if(!this.info) return statusObj
				let startTime = info.s_time * 1000
				let endTime = info.e_time * 1000
				if(startTime > currentTime) {
					statusObj.textName = '开始'
					statusObj.status = 1
					statusObj.cownDownTime = startTime - currentTime
				} else if(endTime > currentTime) {
					statusObj.textName = '结束'
					statusObj.status = 2
					statusObj.cownDownTime = endTime - currentTime
				} else {
					statusObj.textName = '已结束'
					statusObj.status = 3
					statusObj.cownDownTime = ''
				}
				return statusObj
			}
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			changCurrent(e){
				this.current = e.index
			},
			toPage(url){
				uni.navigateTo({
					url
				})
			},
			taLastData(){
				uni.navigateTo({
					url:'/pages/bladeMonarch/lastData'
				})
			},
			async getVoteIndex(){
				try {
					const { data,code } = await voteIndex({id:this.currentId})
					if(code != 1) return
					this.info = data?.data || null
					this.vote_reward = data?.vote_reward || []
					this.vote_area = data?.vote_area || []
				} catch (e) {
					//TODO handle the exception
					setTimeout(() => {
						uni.navigateBack()
					},1000)
				} finally {
					this.loading = false
				}
			},
			dowmTimeEnd(){
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.getVoteIndex()
					this.getUserInfo()
				},1000)
			},
			async handle_vote_change(vote_area_id,id,vote_type = 1){
				if(this.currentStatus.status != 2) {
					uni.showToast({
						title:'活动未开始或已结束',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					title:'投票中...',
					mask:true
				})
				const { code,data,msg } = await handle_vote({vote_type,id,vote_area_id})
				uni.hideLoading()
				if(code != 1) return
				uni.showToast({
					title:msg,
					icon:'none'
				})
				this.dowmTimeEnd()
			},
			async create_vote_password_change(){
				uni.showLoading({
					title:'创建中...',
					mask:true
				})
				const { code,data } = await create_vote_password({id:this.info?.id})
				uni.hideLoading()
				if(code != 1) return
				uni.setClipboardData({
					data:data,
					success: () => {
						uni.showToast({
							title:'创建成功',
							icon:'none'
						})
						this.getUserInfo()
					}
				})
			}
		},
		onHide() {
			clearTimeout(this.timer)
			this.timer = null
		}
		
	}
</script>

<style>
	page {
		background-color: #1B52F5;
	}
</style>
<style lang="scss" scoped>
	.item-box {
		padding: 19px 16px 20px;
		border-radius: 15px;
		.end-cown-time {
			height: 58rpx;
			background: #666668;
			border-radius: 15px 15px 15px 15px;
			padding: 0 28rpx;
			/deep/ .u-count-down__text {
				color: #fff !important;
				font-size: 28rpx;
			}
		}
		.goods-item-box {
			width: 48.5%;
			margin-top: 40rpx;
			.kanyidao-btn {
				width: 126rpx;
				height: 62rpx;
				background: #1954F8;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				line-height: 62rpx;
				text-align: center;
				font-family: Source Han Sans CN VF, Source Han Sans CN VF;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.songhua-btn {
				width: 126rpx;
				height: 62rpx;
				background: #00FFA9;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				font-family: Source Han Sans CN VF, Source Han Sans CN VF;
				font-weight: bold;
				font-size: 24rpx;
				color: #132A22;
				line-height: 62rpx;
				text-align: center;
				margin-left: 16rpx;
			}
		}
		
		.image-box {
			position: relative;
			.number-data-box {
				position: absolute;
				bottom: 16rpx;
				left: 0;
				width: 100%;
				.number-box {
					padding: 12rpx 24rpx;
					background: #231812;
					border-radius: 12px 12px 12px 12px;
				}
			}
		}
	}
	.gradient-text {
		background: linear-gradient(to right, #DC8C33, #F97A07); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
		-webkit-background-clip: text;/*将设置的背景颜色限制在文字中*/
		-webkit-text-fill-color: transparent;/*给文字设置成透明*/
	}
	.more-btn {
		width: 76px;
		height: 31px;
		border-radius: 17px 17px 17px 17px;
		font-size: 12px;
	}
	.nodata-box {
		width: 100%;
		height: 612rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	}
</style>
